<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>个人信息 - 活力长者社区</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .profile-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
        }

        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #e9f5eb;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
            color: #28a745;
            font-size: 2.5rem;
        }

        .profile-info h2 {
            margin-bottom: 5px;
        }

        .profile-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            padding: 25px;
            margin-bottom: 25px;
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

        .info-item {
            display: flex;
            margin-bottom: 15px;
        }

        .info-label {
            width: 150px;
            font-weight: 500;
            color: #6c757d;
        }

        .info-value {
            flex: 1;
        }

        .btn-edit {
            background-color: #28a745;
            color: white;
            padding: 8px 20px;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
        }

        .btn-edit:hover {
            background-color: #218838;
            color: white;
        }
    </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="profile-container">
    <div class="profile-header">
        <div class="profile-avatar">
            <i class="bi bi-person-circle"></i>
        </div>
        <div class="profile-info">
            <h2>${memberInfo.memberDetail.realName}</h2>
            <p class="text-muted">${memberInfo.memberDetail.memberType}</p>
            <a href="EditProfileServlet" class="btn-edit">
                <i class="bi bi-pencil"></i> 编辑个人信息
            </a>
        </div>
    </div>

    <div class="profile-card">
        <h3 class="card-title">基本信息</h3>
        <div class="info-item">
            <div class="info-label">姓名</div>
            <div class="info-value">${memberInfo.memberDetail.realName}</div>
        </div>
        <div class="info-item">
            <div class="info-label">性别</div>
            <div class="info-value">${memberInfo.memberDetail.gender}</div>
        </div>
        <div class="info-item">
            <div class="info-label">出生日期</div>
            <div class="info-value">${memberInfo.memberDetail.birthDate}</div>
        </div>
        <div class="info-item">
            <div class="info-label">身份证号</div>
            <div class="info-value">${memberInfo.memberDetail.idCard}</div>
        </div>
        <div class="info-item">
            <div class="info-label">联系电话</div>
            <div class="info-value">${memberInfo.memberDetail.phone}</div>
        </div>
    </div>

    <div class="profile-card">
        <h3 class="card-title">紧急联系人</h3>
        <div class="info-item">
            <div class="info-label">联系人姓名</div>
            <div class="info-value">${memberInfo.memberDetail.contactName}</div>
        </div>
        <div class="info-item">
            <div class="info-label">联系电话</div>
            <div class="info-value">${memberInfo.memberDetail.contactPhone}</div>
        </div>
    </div>

    <div class="profile-card">
        <h3 class="card-title">会员信息</h3>
        <div class="info-item">
            <div class="info-label">会员类型</div>
            <div class="info-value">${memberInfo.memberDetail.memberType}</div>
        </div>
<%--        <div class="info-item">
            <div class="info-label">注册日期</div>
            <div class="info-value">2023-01-15</div>
        </div>--%>
        <div class="info-item">
            <div class="info-label">会员状态</div>
            <div class="info-value"><span class="badge bg-success">正常</span></div>
        </div>
    </div>
</div>

<c:import url="footer.jsp" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>